<template>
  <div class="dataChoose">
    <el-row class="bgColor">
      <el-col :xs="24" :sm="24" :lg="24" class="choose-flex">
        <el-radio-group v-model="choose" class="group-radio">
          <el-radio v-if="isShowGroup" :label="1" style="margin-right: 30px;" class="flex-radio radioEl">
            事业群
            <el-select :disabled="choose == 2" @change="groupChange" clearable style="margin-left: 6px;" v-model="selectedgroup" filterable placeholder="请选择事业群">
              <el-option
                v-for="item in group_selector"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-radio>
          <el-radio v-if="isShowProj" :label="2" class="flex-radio">
            项目
            <el-cascader
              :disabled="choose == 1"
              style="margin-left: 6px;"
              v-model="selectedProject"
              placeholder="请选择项目"
              :options="project_selector"
              :show-all-levels="false"
              @change="handleChange"
              clearable
              filterable
            >
            </el-cascader>
          </el-radio>
        </el-radio-group>
        <div v-if="isReport" class="time-box">
          <label class="col-form-label" style="font-size:15px;font-weight: 500;">时间段：</label>
          <!-- :value-format="dateType =='daterange' ? 'yyyy-MM-dd' : 'yyyy-MM'" -->
          <el-date-picker
              v-model="dateTimes"
              :placeholder="isShowProj ? '选择月份' : '选择年份'"
              :type="dateType"
              align="right"
              size="small"
              :value-format="isShowProj ? 'yyyy-MM' : 'yyyy'"
              @change="changeTime"
              :default-time="dateTimes"
              class="mr-4">
          </el-date-picker>
        </div>

        <!-- <div v-if="isReport" class="report_box">
            <label class="col-form-label" style="font-size:15px;font-weight: 500;">发送类型</label>
            <el-select :disabled="choose == 2" @change="reportChange" clearable style="margin-left: 6px;" v-model="selectedreportId" filterable placeholder="请选择月报类型">
              <el-option
                v-for="item in report_selector"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div> -->
      </el-col>

      <el-col :xs="24" :sm="24" :lg="12" style="margin-top: 15px;"></el-col>
    </el-row>

    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getHeader } from '@/app.config'
import { removeToken, removeName } from '@/utils/auth'

export default {
  props: {
    dateType: {
      type: String,
      default: 'daterange'
    },
    isShowProj: {
      type: Boolean,
      default: true
    },
    isShowGroup: {
      type: Boolean,
      default: true
    },
    isReport:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      choose: 1,
      selectedProject: '',
      projectId: '',
      groupId: '',
      project_selector: [],
      group_selector: [],
      report_selector: [
        {label: "持续交付月报", value: 1},
        {label: "质量KPI月报", value: 2}
      ],
      selectedgroup: '',
      selectedgroupId: '',
      dateTimes: '',
    }
  },
  computed: {
    ...mapState({
        dataChoose: state => state.dataChoose
    }),
    solveStatus() {
      if(this.selectedgroupId == 30) { // 265
        return true
      } else {
        return false
      }
    },
    dataSolveStatus() {
      if(this.groupId == 30) { // 265
        return true
      } else {
        return false
      }
    }
  },
  created() {
    this.defaultTime()
    this.init()
    // this.get_report()
    //console.log(this.isShowProj)
  },
  watch: {
    choose(val) {
      if(val == 1) {
        this.selectedgroup = this.dataChoose.selectName
        this.selectedgroupId = this.dataChoose.selectId
      } else {
        this.projectId = this.dataChoose.projectId
        this.groupId = this.dataChoose.groupId
        this.selectedProject = [this.groupId, this.projectId]
      }
      this.search()
    }
  },
  methods: {
    ...mapMutations([
      'setDataChoose'
    ]),
    changeTime(val) {
      this.search()
    },
    defaultTime() {
      // if(!this.dataChoose.dateTimes) {
        let end = new Date()
        let start = new Date()

        let ye = start.getFullYear()
        let me = start.getMonth() + 1

        if(me.toString().length == 1) {
          me = "0" + me
        }
        let ending
        if(this.isShowProj) {
          ending = `${ye}-${me}`
        } else {
          ending = `${ye}`
        }
        this.dateTimes = ending
      // } else {
      //   if(this.isShowProj) { //  && this.dataChoose.dateTimes.indexOf('-') > 0
      //     this.dateTimes = this.dataChoose.dateTimes
      //   } else {
      //     this.dateTimes = this.dataChoose.dateTimes.split('-')[0]
      //   }
      // }
    },
    groupChange(value) {
      this.selectedgroupId = value
      this.group_selector.forEach(val => {
        if(val.value == value) {
          this.selectedgroup = val.label
        }
      })
      this.search()
    },
    reportChange(value) {
      this.selectedreportId = value
      this.report_selector.forEach(val =>{
        if(val.value == value) {
          this.selectedreport = val.label
        }
      })
      this.search()
      // this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/report/addressee?group_id=${this.selectedgroupId}&source_type=1&report_type=${this.selectedreportId}`, {headers: getHeader()})
      // .then(res => {
      //   if(res.data.code === 200) {
      //     console.log(res.data)
      //   }
      // })
    },
    handleChange(value) {
      this.projectId = value[1]
      this.groupId = value[0]
      this.search()
    },
    getGroup(list) {
      let arr = []
      if(list) {
        arr = list.map(val => {
          return {
            label: val.label,
            value: val.value
          }
        })
      }
      return arr
    },
    init() {
      this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine_group_project`, {headers: getHeader()})
      .then(res => {
        if(res.data.code === 200) {
          this.project_selector = res.data.data
          this.group_selector = this.getGroup(res.data.data)
          if(this.dataChoose.selectId) {
            this.selectedgroup = this.dataChoose.selectName
            this.selectedgroupId = this.dataChoose.selectId
          } else {
            if(this.group_selector.length) {
              this.selectedgroup = this.group_selector[0].label
              this.selectedgroupId = this.group_selector[0].value
            }
          }

          if(this.dataChoose.projectId) {
            this.projectId = this.dataChoose.projectId
            this.groupId = this.dataChoose.groupId
          } else {
            if(this.project_selector.length) {
              this.projectId = this.project_selector[0].children[0].value
              this.groupId = this.project_selector[0].value
            }
          }
          this.selectedProject = [this.groupId, this.projectId]
          this.search()
        } else if (res.data.code == 401) {
          removeToken()
          removeName()
          this.$message.error('登陆超时或该账号已被登出，请您重新登录');
          this.$router.push({
              path: '/#/login'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // get_report(){
    //   this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/indicator/examine/report/addressee`, {headers: getHeader()})
    //   .then(res => {
    //     if(res.data.code === 200) {
    //       this.report_selector = res.data
    //     }
    //   })
    // },
    search() {
      let time, dateTimes, projectId, groupId, radio, selectId, selectName, projectName, solveStatus, dataSolveStatus
      this.dateTimes ? time = this.dateTimes : time = ''
      // if(this.isShowProj) {
      //   this.dateTimes ? time = this.dateTimes : time = ''
      // } else {
      //   this.dateTimes ? time = this.dateTimes.split('-')[0] : time = ''
      // }
      dateTimes = this.dateTimes
      projectId = this.projectId
      projectName = this.selectedProject
      groupId = this.groupId
      selectId = this.selectedgroupId
      selectName = this.selectedgroup
      radio = this.choose
      solveStatus = this.solveStatus
      dataSolveStatus = this.dataSolveStatus
      this.setDataChoose({
        time,
        radio,
        selectId,
        selectName,
        projectName,
        dateTimes,
        projectId,
        groupId,
        solveStatus,
        dataSolveStatus,
      })
      // console.log(this.dataChoose)
    }
  }
}
</script>

<style lang="scss" scoped>
  .dataChoose{
    .bgColor{
      background: #ffffff;
      padding: 20px;
      .choose-flex{
        display: flex;
        .group-radio{
          // flex: 0 0 60%;
          margin: auto 0;
          display: flex;
          flex-wrap: wrap;
          margin-right: 15px;
          .flex-radio{
            flex: 1;
            margin: auto 0;
          }
        }
        .time-box{
          margin: auto 0;
        }
        .report_box {
          flex: 1;
          margin-left: 45px;
        }
      }
    }
  }
  .mr-1, .mx-1 {
        margin-right: 1.58rem;
        margin-left: 2.1rem;
        /* padding-left: 2rem; */
    }
    .ml-3, .mx-3 {
        margin-left: 1rem!important;
    }
    .ml-2{
        float: right;
        margin-right: 4%;
    }
    .col-form-label {
        padding-top: calc(.375rem + 1px);
        padding-bottom: calc(.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
        font-size: 15px;
    }
</style>
